Skip to content

Commit eee373e

Browse files
hannahildebrandthannahildebrandt
authored
Updated theme to appear more like a native part of Obsidian (#291)
* Updated the CSS for ProjectPicker, ExplorerView, SceneList, NewSceneField, and Tab * Project picker and project details * Updated CSS on Compile tab * Fixed padding on project picker, updated word count styles * Fixed margin on word count progress bar
1 parent 4216594 commit eee373e

File tree

10 files changed

+262
-140
lines changed

10 files changed

+262
-140
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"editor.formatOnSave": true
3-
}
2+
"editor.formatOnSave": false
3+
}

‎src/view/compile/CompileStepView.svelte‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
{:else}
4343
<div class="longform-compile-step-title-outer">
4444
<div class="longform-compile-step-title-container">
45-
<h4>{ordinal}. {step.description.name}</h4>
45+
<h4><span class="longform-compile-step-number">{ordinal}</span>{step.description.name}</h4>
4646
{#if calculatedKind !== null}
4747
<div
4848
class="longform-step-kind-pill"
@@ -100,10 +100,11 @@
100100

101101
<style>
102102
.longform-compile-step {
103-
background-color: var(--background-modifier-form-field);
103+
background-color: var(--background-modifier-border);
104+
border: 1px solid var(--background-modifier-border);
104105
border-radius: var(--radius-s);
105-
padding: var(--size-4-1) var(--size-4-1) var(--size-4-3) var(--size-4-1);
106-
margin-bottom: var(--size-4-4);
106+
padding: 0;
107+
margin: var(--size-4-4) 0;
107108
}
108109
109110
.longform-compile-step-title-outer {
@@ -118,59 +119,73 @@
118119
flex-direction: row;
119120
align-items: center;
120121
flex-wrap: wrap;
122+
font-size: var(--font-ui-smaller);
121123
}
122124
123125
.longform-compile-step-title-container h4 {
124126
display: inline-block;
125-
margin: 0 var(--size-4-2) 0 0;
127+
margin: var(--size-4-1) var(--size-4-2) var(--size-4-1) 0;
126128
padding: 0;
127129
}
128130
129131
.longform-compile-step-title-container .longform-step-kind-pill {
130132
display: flex;
131133
justify-content: center;
132134
align-items: center;
133-
background-color: var(--text-accent);
135+
background-color: color-mix(in srgb, var(--text-accent) 50%, var(--background-modifier-border) 50%);
134136
color: var(--text-on-accent);
135137
border-radius: var(--radius-l);
136138
font-size: var(--font-smallest);
137139
font-weight: bold;
138-
padding: var(--size-4-1);
140+
padding: var(--size-4-1) var(--size-4-2);
139141
margin-right: var(--size-4-1);
140142
height: var(--h1-line-height);
141143
}
142144
145+
.longform-compile-step-number {
146+
color: var(--text-faint);
147+
display: inline-block;
148+
width: var(--size-4-6);
149+
padding-left: var(--size-4-1);
150+
}
151+
143152
.longform-remove-step-button {
144153
display: flex;
145154
width: var(--size-4-5);
146-
margin: 0;
155+
height: 100%;
156+
margin: 1px;
147157
align-items: center;
148158
justify-content: center;
149159
font-weight: bold;
160+
background: var(--background-modifier-error);
150161
}
151162
152163
.longform-compile-step p {
153164
margin: 0;
154-
padding: 0;
165+
background: var(--background-primary);
155166
}
156167
157168
.longform-compile-step-description {
158169
font-size: var(--font-smallest);
159170
color: var(--text-muted);
160-
margin-top: var(--size-2-1);
171+
padding: var(--size-4-2) var(--size-4-1) var(--size-4-2) var(--size-4-6);
161172
}
162173
174+
.longform-compile-step-description .solo {
175+
padding-right: var(--size-4-6);
176+
}
177+
163178
.longform-compile-step-options {
164179
padding: var(--size-4-2) 0;
180+
background: var(--background-primary);
165181
}
166182
167183
.longform-compile-step-options > div {
168-
border-left: var(--border-width) solid var(--interactive-accent);
169-
padding: 0 var(--size-4-2);
184+
margin: 0 var(--size-4-2) 0 var(--size-4-6)
170185
}
171186
172187
.longform-compile-step-option {
173-
margin-top: var(--size-4-2);
188+
margin: 0 var(--size-4-4) var(--size-4-4) 0;
174189
}
175190
176191
.longform-compile-step-option label {
@@ -179,10 +194,6 @@
179194
font-size: var(--font-smallest);
180195
}
181196
182-
.longform-compile-step-option input {
183-
color: var(--text-accent);
184-
}
185-
186197
.longform-compile-step-checkbox-container {
187198
display: flex;
188199
flex-direction: row;
@@ -191,13 +202,11 @@
191202
}
192203
193204
.longform-compile-step-option input[type="text"] {
194-
color: var(--text-accent);
195205
margin: 0 0 var(--size-4-1) 0;
196206
width: 100%;
197207
}
198208
199209
.longform-compile-step-option input[type="checkbox"] {
200-
color: var(--text-accent);
201210
margin: 0 var(--size-4-2) var(--size-2-1) 0;
202211
}
203212
@@ -207,7 +216,7 @@
207216
208217
.longform-compile-step-option-description {
209218
font-size: var(--font-smallest);
210-
line-height: 90%;
219+
line-height: 1em;
211220
color: var(--text-faint);
212221
}
213222
@@ -218,6 +227,6 @@
218227
.longform-compile-step-error {
219228
color: var(--text-error);
220229
font-size: var(--font-smallest);
221-
line-height: 90%;
230+
line-height: 1em;
222231
}
223-
</style>
232+
</style>

‎src/view/compile/CompileView.svelte‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -348,15 +348,24 @@
348348
</div>
349349
{/if}
350350

351-
<p>
352-
Compile workflows run their steps in order.<br /><b>Scene</b> workflows
353-
run once per scene.<br /><b>Join</b> workflows run once and combine the
354-
rest of your scene steps into a single manuscript.<br /><b>Manuscript</b>
355-
steps run once on the joined manuscript.<br />Drag to rearrange.
356-
<a href="https://github.com/kevboh/longform/blob/main/docs/COMPILE.md"
357-
>Documentation here.</a
351+
<ul class="longform-compile-instructions">
352+
<li>
353+
Compile workflows run their steps in order.
354+
</li>
355+
<li>
356+
<strong>Scene</strong> workflows run once per scene.
357+
</li>
358+
<li>
359+
<strong>Join</strong> workflows run once and combine the rest of your scene steps into a single manuscript.
360+
</li>
361+
<li>
362+
<strong>Manuscript</strong> steps run once on the joined manuscript.
363+
</li>
364+
<li>
365+
Drag to rearrange. <a href="https://github.com/kevboh/longform/blob/main/docs/COMPILE.md">Documentation here.</a
358366
>
359-
</p>
367+
</li>
368+
</ul>
360369

361370
<div class="longform-compile-run-container">
362371
{#if $currentWorkflow && $currentWorkflow.steps.length > 0}
@@ -378,13 +387,16 @@
378387

379388
<style>
380389
.longform-workflow-picker-container {
381-
margin-bottom: var(--size-4-8);
382-
padding: var(--size-4-2) 0;
383-
border-bottom: var(--border-width) solid var(--background-modifier-border);
390+
padding: var(--size-4-2);
391+
background: var(--background-primary);
384392
display: flex;
385393
flex-direction: column;
386394
}
387395
396+
#longform-workflows {
397+
color: var(--color-accent-2);
398+
}
399+
388400
.longform-workflow-picker {
389401
display: flex;
390402
flex-direction: row;
@@ -457,6 +469,20 @@
457469
color: var(--text-accent-hover);
458470
}
459471
472+
.longform-compile-instructions {
473+
font-size: var(--font-smallest);
474+
padding: var(--size-4-4) var(--size-4-4) var(--size-4-1) var(--size-4-8);
475+
color: var(--text-muted);
476+
}
477+
478+
.longform-compile-instructions li {
479+
margin-bottom: var(--size-4-1)
480+
}
481+
482+
.longform-compile-instructions strong {
483+
color: var(--color-accent-2);
484+
}
485+
460486
.compile-button {
461487
font-weight: bold;
462488
background-color: var(--interactive-accent);

‎src/view/components/Disclosure.svelte‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,7 @@
55
</script>
66

77
<span class:collapsed class={className} on:click>
8-
<svg viewBox="0 0 100 100" class="right-triangle" width="8" height="8"
9-
><path
10-
fill="currentColor"
11-
stroke="currentColor"
12-
d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"
13-
/></svg
14-
>
8+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg>
159
</span>
1610

1711
<style>
@@ -20,6 +14,10 @@
2014
display: flex;
2115
align-items: center;
2216
justify-content: center;
17+
width: var(--size-4-3);
18+
color: var(--icon-color);
19+
margin-left: calc(var(--size-4-1) * -1);
20+
margin-top: calc(var(--size-4-1) * -.25);
2321
}
2422
2523
.collapsed .right-triangle {

‎src/view/explorer/ExplorerView.svelte‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
<ProjectDetails />
7676
</div>
7777
{:else}
78-
<div class="tab-panel-container">
78+
<div class="tab-panel-container disconnected">
7979
<CompileView />
8080
</div>
8181
{/if}
@@ -117,11 +117,17 @@
117117
}
118118
119119
.tab-list {
120-
margin: var(--size-4-1) 0;
121-
border-bottom: var(--border-width) solid var(--text-muted);
120+
margin: 0;
121+
font-size: 0; /* To remove spacing between tabs */
122122
}
123123
124124
.tab-panel-container {
125+
background: var(--background-primary);
126+
padding: var(--size-4-1) var(--size-4-2);
127+
}
128+
129+
.tab-panel-container.disconnected {
130+
background: none;
125131
padding: 0;
126132
}
127133

‎src/view/explorer/NewSceneField.svelte‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<input
3939
id="new-scene"
4040
type="text"
41-
placeholder="New Scene…"
41+
placeholder="New Scene"
4242
bind:value={newSceneName}
4343
bind:this={newSceneInput}
4444
on:keydown={(e) => {
@@ -59,24 +59,20 @@
5959
<style>
6060
.new-scene-container {
6161
margin: 0;
62-
border-top: var(--border-width) solid var(--text-muted);
63-
padding: var(--size-4-1) 0;
62+
padding: var(--size-4-2) 0;
6463
}
6564
6665
#new-scene {
67-
padding: 0;
68-
border: 0;
69-
background: inherit;
70-
font-size: 1em;
71-
line-height: var(--h3-line-height);
7266
width: 100%;
67+
background: var(--background-modifier-form-field);
68+
border: var(--input-border-width) solid var(--background-modifier-border);
69+
border-radius: var(--input-radius);
70+
font-size: var(--font-ui-small);
71+
padding: var(--size-4-1) var(--size-4-2);
7372
}
7473
7574
#new-scene.invalid {
7675
color: var(--text-error);
7776
}
7877
79-
#new-scene::placeholder {
80-
font-style: italic;
81-
}
8278
</style>

0 commit comments

Comments
 (0)