You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
6.7 KiB
259 lines
6.7 KiB
/* 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: var(--background-modifier-border, #333);
|
|
--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 {
|
|
--metatable-collapsed-symbol: "▶︎";
|
|
--metatable-expanded-symbol: "▼";
|
|
--metatable-font-family: var(--text, sans-serif);
|
|
--metatable-font-size: var(--font-small, 13px);
|
|
--metatable-key-border-width: 2px;
|
|
--metatable-mark-symbol: "…";
|
|
--metatable-value-background: transparent;
|
|
--metatable-background: transparent;
|
|
--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);
|
|
}
|
|
|
|
.obsidian-metatable summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.obsidian-metatable .member .value {
|
|
border: none;
|
|
background-color: var(--metatable-value-background);
|
|
grid-area: value;
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 0.4rem;
|
|
}
|
|
|
|
.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: var(--metatable-foreground);
|
|
display: inline-block;
|
|
padding: 0.1rem 0.6rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.obsidian-metatable .tag::before {
|
|
content: var(--metatable-tag-symbol);
|
|
}
|
|
|
|
.obsidian-metatable .tag:hover {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
*/
|