styles.css for metatable

/* Obsidian metatble styles */

/* Styles are wrapped inside a shadow DOM. If you want to see them go to https://github.com/arnau/obsidian-metatable/blob/main/src/metatable.css */


/* The styles below are an example that can get you started with the Naked
 * option
 */

.theme-light .obsidian-metatable {
  --metatable-foreground: var(--text-muted, darkslategrey);
  --metatable-key-background: var(--background-primary-alt, #f3f3f3);
  --metatable-key-border-color: var(--background-modifier-border, lightgrey);
  --metatable-key-border-color-focus: orange;
  --metatable-key-focus: var(--background-match-highlight, lightyellow);
  --metatable-tag-background: var(--background-primary-alt, #f3f3f3);
  --metatable-link-color: var(--text-accent, #705dcf);
  --metatable-link-color-hover: var(--text-accent-hover, #8875ff);
}

.theme-dark .obsidian-metatable {
  --metatable-foreground: var(--text-muted, #999);
  --metatable-key-background: var(--background-primary-alt, #111);
  --metatable-key-border-color: transparent;
  --metatable-key-border-color-focus: orange;
  --metatable-key-focus: black;
  --metatable-tag-background: var(--background-primary-alt, #111);
  --metatable-link-color: var(--text-accent, #705dcf);
  --metatable-link-color-hover: var(--text-accent-hover, #8875ff);
}

.obsidian-metatable {
    line-height: 16px;
  --metatable-collapsed-symbol: "▶︎";
  --metatable-expanded-symbol: "▼";
  --metatable-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
  --metatable-font-size: var(--font-small, 13px);
  --metatable-key-border-width: 2px;
  --metatable-mark-symbol: "…";
  --metatable-value-background: transparent;
  --metatable-background: rgb(32, 36, 43);
  --metatable-tag-symbol: "#";
  --metatable-external-link-icon: url(app://obsidian.md/public/images/874d8b8e340f75575caa.svg);
  --metatable-external-link-color: var(--metatable-link-color);
  --metatable-external-link-color-hover: var(--metatable-link-color-hover);
  --metatable-internal-link-icon: none;
  --metatable-internal-link-color: var(--metatable-link-color);
  --metatable-internal-link-color-hover: var(--metatable-link-color-hover);
}

.obsidian-metatable * {
  box-sizing: border-box;
}

.obsidian-metatable details {
  background-color: var(--metatable-background);
  color: var(--metatable-foreground);
  font-family: var(--metatable-font-family);
  font-size: var(--metatable-font-size);
  border: 1px solid #424958;
  padding: 6px 14px;
  border-radius: 4px;
}

.obsidian-metatable summary {
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px;
  border-bottom: transparent;
}

.obsidian-metatable details[open] > summary {
  border-bottom: 1px solid #424958;
}

.obsidian-metatable summary:focus {
  outline: none;
}

.obsidian-metatable summary:focus-visible {
  outline: none;
  background-color: var(--metatable-key-focus)
}

.obsidian-metatable .set {
  background-color: var(--metatable-background);
  display: grid;
  grid-gap: 2px;
  margin-top: 0.4rem;
}

.obsidian-metatable .member {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  grid-template-areas: "key value";
}

.obsidian-metatable .key[role=button] {
  cursor: pointer;
}

.obsidian-metatable .member .key {
  background-color: var(--metatable-key-background);
  border: none;
  border-right: var(--metatable-key-border-width) solid var(--metatable-key-border-color);
  display: grid;
  grid-template-columns: 10px auto;
  grid-gap: 0.4rem;
  font-weight: bold;
  grid-area: key;
  overflow: hidden;
  padding: 0.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
  font-weight: 500;
}

.obsidian-metatable .member .value {
  border: none;
  background-color: var(--metatable-value-background);
  grid-area: value;
  margin: 0;
  overflow: auto;
  padding: 0.4rem;
  color: rgb(220, 221, 222);
}

.obsidian-metatable .member .key:focus {
  outline: none;
}

.obsidian-metatable .member .key:focus-visible {
  outline: none;
  border-right-color: var(--metatable-key-border-color-focus);
  background-color: var(--metatable-key-focus);
}

.obsidian-metatable .value ul {
  margin: 0;
  padding: 0;
}

.obsidian-metatable .value li {
  margin-left: 1rem;
}

.obsidian-metatable .key[aria-expanded]::before {
  font-size: 0.6rem;
  padding-top: 0.3rem;
}

.obsidian-metatable .key[aria-expanded=true]::before {
  content: var(--metatable-expanded-symbol);
}

.obsidian-metatable .key[aria-expanded=false]::before {
  content: var(--metatable-collapsed-symbol);
}

.obsidian-metatable .key[aria-expanded=false] + .value > :first-child {
  display: none;
}

.obsidian-metatable .key[aria-expanded=false] + .value > .marker::after {
  content: var(--metatable-mark-symbol);
  display: block;
}

@media screen and (min-width: 400px) and (max-width: 550px) {
  .obsidian-metatable .member {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
  }
  .obsidian-metatable .member .member {
    grid-template-areas: "key key" "value value";
  }

  .obsidian-metatable .member .member .key {
    border-right: none;
    border-bottom: var(--metatable-key-border-width) solid var(--metatable-key-border-color);
  }

}

@media screen and (max-width: 400px) {
  .obsidian-metatable .member {
    grid-template-areas: "key key" "value value";
  }

 .obsidian-metatable .member .key {
    border-right: none;
    border-bottom: var(--metatable-key-border-width) solid var(--metatable-key-border-color);
  }
}

.obsidian-metatable .tag-list li {
  display: inline-block;
  margin: 0 0.4rem 0 2px;
}

.obsidian-metatable .tag {
  background-color: var(--metatable-tag-background);
  border-radius: 1rem;
  color: rgb(220, 221, 222);
  display: inline-block;
  margin: 2px;
  padding: 2px 8px;
  line-height: 19px;
  border: 1px solid transparent;
  background-color: rgb(26, 30, 36);
  text-decoration: none;
}

.obsidian-metatable .tag::before {
  content: var(--metatable-tag-symbol);
}

.obsidian-metatable .tag:hover {
    color: #e5c07b;
    border-color: #424958;
    border-radius: 4px;
    /* background-color: rgb(39, 45, 56); */
}

.obsidian-metatable .tag:focus,
.obsidian-metatable .external-link:focus,
.obsidian-metatable .internal-link:focus {
  outline: none;
}

.obsidian-metatable .tag:focus-visible,
.obsidian-metatable .external-link:focus-visible,
.obsidian-metatable .internal-link:focus-visible {
  outline: none;
  background-color: var(--metatable-key-focus)
}

.obsidian-metatable .external-link {
  color: var(--metatable-external-link-color);
  display: inline-block;
  white-space: nowrap;
}

.obsidian-metatable .external-link::after {
  content: var(--metatable-external-link-icon);
  display: inline-block;
  margin-left: 0.3rem;
  vertical-align: sub;
}

.obsidian-metatable .external-link:hover {
  color: var(--metatable-external-link-color-hover);
}

.obsidian-metatable .internal-link {
  color: var(--metatable-internal-link-color);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 450px;
  white-space: nowrap;
}

.obsidian-metatable .internal-link::after {
  content: var(--metatable-internal-link-icon);
  display: inline-block;
  margin-left: 0.3rem;
  vertical-align: sub;
}

.obsidian-metatable .internal-link:hover {
  color: var(--metatable-internal-link-color-hover);
}