search

Akifyss / obsidian-border

A theme for obsidian.md
MIT License
1.48k stars 51 forks source link

customize inline field in style settings #333

Closed Med-chaabene closed 2 months ago

Med-chaabene commented 2 months ago

I want to customize the inline field in style settings it doesn't look good by default, to be honest

Akifyss commented 2 months ago

Are you referring to the metadata section at the beginning of the editor? If so, Obsidian itself offers many fields to customize this part. You can import the following CSS code and adjust various style parameters according to your preferences:

body {
    --metadata-background: transparent;
    --metadata-display-reading: block;
    --metadata-display-editing: block;
    --metadata-max-width: none;
    --metadata-padding: var(--size-4-2) 0;
    --metadata-border-color: var(--background-modifier-border);
    --metadata-border-radius: 0;
    --metadata-border-width: 0;
    --metadata-divider-color: var(--background-modifier-border);
    --metadata-divider-color-hover: transparent;
    --metadata-divider-color-focus: transparent;
    --metadata-divider-width: 0;
    --metadata-gap: 3px;
    --metadata-property-padding: 0;
    --metadata-property-radius: 6px;
    --metadata-property-radius-hover: 6px;
    --metadata-property-radius-focus: 6px;
    --metadata-property-background: transparent;
    --metadata-property-background-hover: transparent;
    --metadata-property-background-active: var(--background-modifier-hover);
    --metadata-label-background-hover: transparent;
    --metadata-label-background-active: var(--background-modifier-hover);
    --metadata-label-font: var(--font-interface);
    --metadata-label-font-size: var(--font-smaller);
    --metadata-label-font-weight: inherit;
    --metadata-label-text-color: var(--text-muted);
    --metadata-label-text-color-hover: var(--text-muted);
    --metadata-label-width: 9em;
    --metadata-input-height: calc(var(--font-text-size) * 1.75);
    --metadata-input-text-color: var(--text-normal);
    --metadata-input-font: var(--font-interface);
    --metadata-input-font-size: var(--font-smaller);
    --metadata-input-background: transparent;
    --metadata-input-background-hover: transparent;
    --metadata-input-background-active: var(--background-modifier-hover);
    --metadata-sidebar-label-font-size: var(--font-ui-small);
    --metadata-sidebar-input-font-size: var(--font-ui-small);
}