obsidian-file-metadata/styles.css at main · aicayzer/obsidian-file-metadata · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
/* @settings
name: File Metadata
id: file-metadata
settings:
  -
    id: fm-heading-colors
    title: Colors
    type: heading
    level: 2
    collapsed: true
  -
    id: fm-header-color
    title: Section header color
    type: variable-themed-color
    format: hex
    default-light: '#1a1a1a'
    default-dark: '#e8e8e8'
  -
    id: fm-label-color
    title: Row label color
    type: variable-themed-color
    format: hex
    default-light: '#6e7781'
    default-dark: '#999'
  -
    id: fm-value-color
    title: Row value color
    type: variable-themed-color
    format: hex
    default-light: '#383a42'
    default-dark: '#b8b8b8'
  -
    id: fm-outline-color
    title: Outline item color
    type: variable-themed-color
    format: hex
    default-light: '#555555'
    default-dark: '#999999'
  -
    id: fm-heading-layout
    title: Layout
    type: heading
    level: 2
    collapsed: true
  -
    id: fm-divider-opacity
    title: Section divider opacity
    type: variable-number-slider
    default: 0.5
    min: 0
    max: 1
    step: 0.05
  -
    id: fm-section-spacing
    title: Spacing above divider (px)
    type: variable-number
    default: 12
    format: px
  -
    id: fm-label-width
    title: Label column width (%)
    type: variable-number-slider
    default: 40
    min: 20
    max: 60
    step: 5
*/

/* ═══════════════════════════════════════════════════
   File Metadata Plugin
   Scoped under .fm-pane to avoid conflicts.
   Rows adopt Obsidian's native tree-item structure.
═══════════════════════════════════════════════════ */

/* ── View shell ───────────────────────────────────── */

.fm-view {
  overflow-y: auto;
}

.fm-container {
  padding: 4px 0 24px;
}

.fm-empty {
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

/* ── Divider between sections ─────────────────────── */

.fm-divider {
  height: 1px;
  background: var(--background-modifier-border);
  margin: var(--fm-section-spacing, 12px) 16px 8px;
  opacity: var(--fm-divider-opacity, 0.5);
}

/* ── Section headers (fm-header) ──────────────────── */

.fm-header .tree-item-self {
  color: var(--fm-header-color, var(--text-normal));
  font-weight: var(--nav-heading-weight);
  font-size: var(--nav-heading-size);
  padding-block: 8px 6px;
}

/* Header title spans available space (overrides .fm-pane 40% label width) */
.fm-pane .fm-header .tree-item-inner {
  flex: 1 1 auto;
}


/* ── Focus indicator for keyboard navigation ─────── */

.fm-pane .tree-item-self.is-clickable:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: -2px;
  border-radius: var(--radius-s);
}

/* ── Data rows (inside fm-pane) ───────────────────── */

.fm-pane .tree-item-self {
  color: var(--fm-label-color, var(--text-muted));
  padding-inline-start: var(--size-4-2);
}

/* Label: configurable width so values always right-align consistently */
.fm-pane .tree-item-inner {
  flex: 0 0 var(--fm-label-width, 40%);
  min-width: 0;
}

/* Value container: takes remaining space, right-aligned */
.fm-pane .tree-item-flair-outer {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  margin-inline-start: auto;
}

/* Value text: right-aligned, clamps at 3 lines, wraps on word boundaries */
.fm-pane .tree-item-flair,
.fm-pane .tree-item-self:hover .tree-item-flair {
  color: var(--fm-value-color, var(--text-normal));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: right;
  line-height: normal;
}

/* ── Outline items (fm-outline) ───────────────────── */

/* Outline items span full width — no flair/value column */
.fm-outline .tree-item-inner {
  flex: 1 1 auto;
}

/* Outline colour: darker than labels, softer than values */
.fm-outline .tree-item-self .tree-item-inner {
  color: var(--fm-outline-color, var(--text-muted));
  transition: color 0.1s ease;
}

.fm-outline .tree-item-self:hover .tree-item-inner {
  color: var(--fm-value-color, var(--text-normal));
}