mhproto 0.8.0-preview.0

package/viewer/style.css

@@ -0,0 +1,1003 @@
+:root {
+  color-scheme: light;
+  --ink: #141414;
+  --muted: #666;
+  --line: #e9e9e9;
+  --link: #2458ca;
+  --visited: #7543a6;
+  --error: #b42318;
+  font:
+    14px/1.65 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  background: white;
+  color: var(--ink);
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: white;
+}
+a {
+  color: var(--link);
+  text-decoration: none;
+}
+a:visited {
+  color: var(--visited);
+}
+a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+button,
+input {
+  font: inherit;
+}
+button {
+  cursor: pointer;
+}
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 4px;
+}
+[hidden] {
+  display: none !important;
+}
+.sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: 214px;
+  padding: 32px 26px;
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  background: white;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--ink) !important;
+  width: fit-content;
+}
+.brand-mark {
+  font:
+    600 27px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  letter-spacing: -1.5px;
+}
+.brand > span:last-child {
+  font-size: 14px;
+  font-weight: 550;
+}
+.brand:hover {
+  text-decoration: none;
+}
+.nav-label {
+  font-size: 11px;
+  color: var(--muted);
+  margin: 38px 0 10px;
+}
+.project-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+#features {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 13px;
+}
+#features a.active {
+  color: var(--link);
+}
+.sidebar-footer {
+  margin-top: auto;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sidebar-footer span {
+  font-size: 10px;
+  color: var(--muted);
+}
+main {
+  margin-left: 214px;
+  width: min(1114px, calc(100% - 214px));
+  padding: 26px 50px 32px;
+}
+.search-row {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  background: white;
+  padding: 0 0 18px;
+  margin: 0 0 28px;
+  border-bottom: 1px solid var(--line);
+}
+#search {
+  border: 0;
+  outline-offset: 2px;
+  background: white;
+  width: 100%;
+  padding: 11px 28px 11px 0;
+  font-size: 13px;
+  color: var(--ink);
+}
+#search::placeholder {
+  color: #777;
+}
+.search-row kbd {
+  position: absolute;
+  right: 2px;
+  font-size: 11px;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 0 5px;
+}
+h1 {
+  font-size: 30px;
+  line-height: 1.2;
+  font-weight: 600;
+  letter-spacing: -0.8px;
+  margin: 0 0 14px;
+}
+h2 {
+  font-size: 18px;
+  font-weight: 550;
+  letter-spacing: -0.25px;
+  margin: 38px 0 18px;
+}
+h3 {
+  font-size: 14px;
+  font-weight: 550;
+  margin: 25px 0 10px;
+}
+p {
+  margin: 0 0 15px;
+}
+.description {
+  font-size: 14px;
+  line-height: 1.8;
+  max-width: 750px;
+  margin-bottom: 18px;
+}
+.feature-url {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--muted);
+  margin: 0 0 34px;
+}
+.feature-url code {
+  font-size: 12px;
+  color: var(--ink);
+}
+.back {
+  font-size: 12px;
+  display: inline-block;
+  margin: 0 0 22px;
+}
+.endpoint-heading {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 13px;
+  margin: 0 0 10px;
+}
+.endpoint-heading a {
+  font:
+    13px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  overflow-wrap: anywhere;
+}
+.method {
+  display: inline-block;
+  flex-shrink: 0;
+  font:
+    600 10px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  letter-spacing: 0.2px;
+  padding: 3px 7px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+.method.get {
+  color: #197047;
+  background: #f0f8f3;
+}
+.method.post {
+  color: #7543a6;
+  background: #f7f2fa;
+}
+.method.put {
+  color: #91620e;
+  background: #fff9eb;
+}
+.method.patch {
+  color: #91620e;
+  background: #fff9eb;
+}
+.method.delete {
+  color: var(--error);
+  background: #fff4f2;
+}
+.endpoint {
+  border-top: 1px solid var(--line);
+  padding: 23px 0 28px;
+}
+.endpoint-summary {
+  font-size: 13px;
+  color: var(--muted);
+  margin: 0 0 15px;
+}
+.io-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
+  gap: 30px;
+}
+.io-heading {
+  font-size: 11px;
+  color: var(--muted);
+  font-weight: 400;
+  margin: 0 0 10px;
+}
+.io-heading strong {
+  font-weight: 500;
+  color: var(--ink);
+}
+.request-part {
+  font-size: 10px;
+  color: var(--muted);
+  margin: 12px 0 5px;
+}
+.request-part:first-child {
+  margin-top: 0;
+}
+.signature {
+  font:
+    11px/1.85 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+.signature-body {
+  padding-left: 15px;
+  border-left: 1px solid var(--line);
+  margin-left: 3px;
+}
+.field {
+  margin: 2px 0;
+}
+.field-name {
+  font-weight: 500;
+}
+.field-type {
+  color: #555;
+}
+.field-constraint {
+  font:
+    10px/1.6 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  color: var(--muted);
+  margin-left: 8px;
+}
+.inline-object {
+  margin: 2px 0;
+}
+.inline-object > summary {
+  cursor: pointer;
+  list-style: none;
+  padding-right: 8px;
+}
+.inline-object > summary::-webkit-details-marker {
+  display: none;
+}
+.object-pill {
+  display: inline-block;
+  background: #fff8d5;
+  color: #38311c;
+  padding: 0 5px;
+  border: 1px solid #f0e7be;
+  border-radius: 3px;
+}
+.inline-object[open] > summary .object-pill {
+  background: #fffdf0;
+}
+.inline-object > div {
+  margin: 5px 0 7px 13px;
+}
+.inline-object .field-note {
+  font:
+    11px/1.65 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  color: var(--muted);
+}
+.behaviour-preview {
+  font-size: 12px;
+  line-height: 1.8;
+  margin: 15px 0 0;
+  color: #555;
+}
+.behaviour-preview b {
+  font-weight: 500;
+  color: var(--ink);
+}
+.rule-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.rule-list > li {
+  margin: 0;
+  padding: 15px 0;
+  border-bottom: 1px solid var(--line);
+  scroll-margin-top: 95px;
+}
+.rule-list > li:last-child {
+  border-bottom: 0;
+}
+.rule-text {
+  font-size: 13px;
+  line-height: 1.8;
+  white-space: pre-line;
+}
+.rule-id {
+  font:
+    10px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  color: var(--muted);
+  display: block;
+  margin-top: 7px;
+}
+.rule-id:visited {
+  color: var(--visited);
+}
+.endpoint-title {
+  font:
+    500 21px/1.5 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  letter-spacing: -0.4px;
+  overflow-wrap: anywhere;
+}
+.endpoint-title .method {
+  margin-right: 8px;
+}
+.page-actions {
+  display: flex;
+  gap: 18px;
+  font-size: 12px;
+  margin: 18px 0 28px;
+}
+.text-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--link);
+  font-size: 12px;
+}
+.section-note {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.8;
+}
+.disclosure {
+  border-top: 1px solid var(--line);
+  padding: 14px 0;
+  margin: 0;
+}
+.disclosure > summary {
+  cursor: pointer;
+  font-size: 12px;
+}
+.disclosure > div {
+  margin-top: 16px;
+}
+.check-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.check-list > li {
+  display: flex;
+  gap: 18px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--line);
+  padding: 12px 0;
+  font-size: 12px;
+}
+.check-list > li:last-child {
+  border: 0;
+}
+.check-status {
+  font-size: 11px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.failing,
+.error {
+  color: var(--error);
+}
+.table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12px;
+}
+.table th,
+.table td {
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--line);
+  padding: 12px 16px 12px 0;
+}
+.table th {
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--muted);
+}
+.table tr:last-child td {
+  border: 0;
+}
+.scenario {
+  border-top: 1px solid var(--line);
+  padding: 18px 0;
+}
+.scenario h3 {
+  margin: 0 0 12px;
+}
+.scenario-line {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: 12px;
+  font-size: 12px;
+  margin: 7px 0;
+}
+.scenario-line b {
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--muted);
+}
+figure.diagram {
+  margin: 28px 0 36px;
+}
+figure.diagram figcaption {
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 14px;
+}
+.diagram-canvas {
+  width: 100%;
+  overflow: auto;
+  min-height: 40px;
+  text-align: center;
+}
+.diagram-canvas svg {
+  max-width: 100%;
+  height: auto;
+}
+.diagram-source {
+  margin-top: 10px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.diagram-source summary {
+  cursor: pointer;
+}
+.diagram-error {
+  font-size: 12px;
+  color: var(--muted);
+  text-align: left;
+  padding: 15px 0;
+}
+pre {
+  font:
+    11px/1.8 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding: 15px;
+  background: #fafafa;
+  border: 1px solid var(--line);
+  max-height: 420px;
+  overflow: auto;
+}
+code {
+  font:
+    11px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+}
+.empty {
+  font-size: 13px;
+  color: var(--muted);
+  padding: 20px 0;
+}
+.empty strong {
+  display: block;
+  color: var(--ink);
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+.search-result {
+  padding: 17px 0;
+  border-bottom: 1px solid var(--line);
+}
+.search-result > a {
+  display: block;
+  font-size: 13px;
+}
+.search-result > p {
+  font-size: 12px;
+  color: var(--muted);
+  margin: 5px 0 0;
+}
+.page-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  border-top: 1px solid var(--line);
+  padding-top: 16px;
+  margin-top: 38px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.source-path {
+  font:
+    11px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  overflow-wrap: anywhere;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (max-width: 1100px) {
+  main {
+    padding: 24px 34px;
+  }
+  .io-grid {
+    gap: 23px;
+  }
+}
+@media (max-width: 760px) {
+  .sidebar {
+    position: static;
+    inset: auto;
+    width: 100%;
+    padding: 17px 23px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 8px 25px;
+  }
+  .brand {
+    grid-row: span 2;
+  }
+  .brand > span:last-child,
+  .sidebar .nav-label,
+  .sidebar-footer span {
+    display: none;
+  }
+  .project-name {
+    font-size: 11px;
+    color: var(--muted);
+  }
+  #features {
+    font-size: 12px;
+  }
+  .sidebar-footer {
+    grid-column: 2;
+    position: absolute;
+    right: 24px;
+    top: 18px;
+  }
+  main {
+    margin: 0;
+    width: 100%;
+    padding: 18px 24px;
+  }
+  .search-row {
+    margin-bottom: 24px;
+  }
+  h1 {
+    font-size: 27px;
+  }
+  .io-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  .endpoint {
+    padding: 22px 0;
+  }
+  .endpoint-heading a {
+    font-size: 12px;
+  }
+  .endpoint-title {
+    font-size: 17px;
+  }
+  .table td,
+  .table th {
+    padding-right: 10px;
+  }
+  .search-row kbd {
+    display: none;
+  }
+  .check-list > li {
+    gap: 10px;
+  }
+  .page-footer {
+    flex-wrap: wrap;
+  }
+}
+
+.attachment-block {
+  font: inherit;
+}
+.attachment-zone > .add-visual {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: baseline;
+  width: 22px;
+  height: 22px;
+  margin-left: 6px;
+  font-size: 15px;
+  line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+}
+.attachment-zone:hover > .add-visual,
+.attachment-zone:focus-within > .add-visual {
+  opacity: 1;
+  pointer-events: auto;
+}
+.visual-context {
+  display: block;
+  font-size: 10px;
+  color: var(--muted);
+  margin-bottom: 4px;
+}
+.visual-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  margin: 10px 0;
+}
+.visual {
+  margin: 0;
+  max-width: 320px;
+}
+.visual img {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  max-height: 210px;
+  object-fit: contain;
+  border: 1px solid var(--line);
+  margin-bottom: 8px;
+}
+.visual figcaption {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
+}
+.visual-editor {
+  max-width: 440px;
+  margin: 12px 0;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: white;
+}
+.visual-form label {
+  display: block;
+  margin-bottom: 12px;
+  font-size: 12px;
+}
+.visual-form input {
+  display: block;
+  width: 100%;
+  padding: 7px 9px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  margin-top: 4px;
+  background: white;
+  font-size: 12px;
+}
+.visual-form input[type='file'] {
+  border: 0;
+  padding: 0;
+}
+.visual-form .section-note {
+  font-size: 11px;
+}
+.visual-actions {
+  display: flex;
+  gap: 18px;
+  margin-top: 16px;
+}
+.visual-message {
+  margin: 12px 0 0;
+}
+.visual-message:empty {
+  display: none;
+}
+@media (hover: none) {
+  .attachment-zone > .add-visual {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.type-link {
+  font: inherit;
+}
+.type-usage-group h3 {
+  font-size: 13px;
+  font-weight: 500;
+  margin: 22px 0 6px;
+}
+.type-usage-list,
+.type-parent-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.type-usage-list li {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+}
+.type-usage-list li > a {
+  font:
+    11px ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  overflow-wrap: anywhere;
+}
+.type-usage-list li > .section-note {
+  font-size: 11px;
+  margin-left: auto;
+}
+.type-parent-list li {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  padding: 9px 0;
+  font-size: 12px;
+}
+.type-parent-list .section-note {
+  font-size: 11px;
+}
+.type-source {
+  font-size: 10px;
+  margin-top: 28px;
+  overflow-wrap: anywhere;
+}
+@media (max-width: 760px) {
+  .type-usage-list li > .section-note {
+    margin-left: 0;
+    width: 100%;
+    padding-left: 48px;
+  }
+}
+.comparison-bar {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  padding: 10px 0;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--line);
+  font-size: 11px;
+  color: var(--muted);
+}
+.comparison-bar button {
+  margin-left: auto;
+}
+.change-badge,
+.change-status {
+  font:
+    10px system-ui,
+    sans-serif;
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+.change-badge {
+  margin-left: 12px;
+  vertical-align: middle;
+}
+.change-badge.added,
+.change-status.added,
+[data-change='added'] > .field-change,
+[data-change='added'] > summary > .field-change {
+  background: #eef8ee;
+}
+.change-badge.changed,
+.change-status.changed,
+[data-change='changed'] > .field-change,
+[data-change='changed'] > summary > .field-change {
+  background: #fff7d6;
+}
+.change-status.removed,
+[data-change='removed'] > .field-change {
+  background: #fbefef;
+}
+.change-link.added {
+  border-bottom: 2px solid #c9e5c9;
+}
+.change-link.changed {
+  border-bottom: 2px solid #ecdba0;
+}
+.field-change {
+  font:
+    9px system-ui,
+    sans-serif;
+  margin-left: 10px;
+  padding: 1px 4px;
+  white-space: nowrap;
+  color: #555;
+}
+[data-change='removed'] > .field-name,
+[data-change='removed'] > .field-type {
+  text-decoration: line-through;
+  color: var(--muted);
+}
+.change-counts {
+  font-size: 12px;
+  margin: 22px 0;
+}
+.baseline-picker {
+  max-width: 640px;
+}
+.baseline-file {
+  display: block;
+  font-size: 12px;
+}
+.baseline-file input {
+  display: block;
+  margin: 12px 0;
+  font-size: 12px;
+  max-width: 100%;
+}
+.comparison-error:empty {
+  display: none;
+}
+.changes-filter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  margin: 25px 0;
+}
+.changes-filter select {
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 6px 10px;
+  font: inherit;
+}
+.changes-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.changes-list > li {
+  display: grid;
+  grid-template-columns: 65px 1fr;
+  gap: 16px;
+  align-items: baseline;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--line);
+}
+.change-status {
+  justify-self: start;
+}
+.changes-list a {
+  font-size: 13px;
+}
+.change-kind {
+  font-size: 10px;
+  color: var(--muted);
+  margin-left: 12px;
+}
+.changes-list p {
+  margin: 5px 0 0;
+  font-size: 11px;
+}
+.diff-table-wrap {
+  overflow-x: auto;
+}
+.diff-table {
+  table-layout: fixed;
+  width: 100%;
+  margin-top: 28px;
+}
+.diff-table th:first-child {
+  width: 24%;
+}
+.diff-table th[scope='row'] {
+  font-weight: 400;
+  overflow-wrap: anywhere;
+  vertical-align: top;
+}
+.diff-table th[scope='row'] .field-change {
+  display: block;
+  margin: 6px 0 0;
+  padding: 0;
+}
+.diff-table td {
+  vertical-align: top;
+}
+.diff-table pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  max-height: none;
+  font-size: 11px;
+}
+.diff-table th,
+.diff-table td {
+  border-bottom: 1px solid var(--line);
+}
+@media (max-width: 760px) {
+  .diff-table {
+    min-width: 570px;
+  }
+  .comparison-bar button {
+    margin-left: 0;
+  }
+  .change-kind {
+    display: block;
+    margin: 5px 0 0;
+  }
+}