Fix text input styles

This commit is contained in:
Mattias Granlund 2023-11-12 22:07:08 +01:00
parent 6d0d34fa65
commit e79d3e9ebe
5 changed files with 23 additions and 10 deletions

View File

@ -27,7 +27,14 @@
<fieldset class="flex flex-col gap-3">
<div class="flex flex-col gap-1">
<label for="path">Path</label>
<input disabled id="path" name="path" type="text" class="w-full" value={project?.path} />
<input
disabled
id="path"
name="path"
type="text"
class="input w-full"
value={project?.path}
/>
</div>
<div class="flex flex-col gap-1">
<label for="name">Project Name</label>
@ -35,7 +42,7 @@
id="name"
name="name"
type="text"
class="w-full"
class="input w-full"
placeholder="Project name can't be empty"
bind:value={title}
required
@ -51,7 +58,7 @@
id="description"
name="description"
rows="3"
class="w-full"
class="input w-full"
value={description}
on:input={onDescriptionInput}
/>

View File

@ -74,7 +74,7 @@
<input
bind:value={sshKey}
disabled={selectedOption !== 'generated'}
class="whitespece-pre w-full select-all rounded border border-light-200 bg-white p-2 font-mono dark:border-dark-400 dark:bg-dark-700"
class="whitespece-pre input w-full select-all rounded border p-2 font-mono"
/>
</div>
<div class="flex flex-row justify-end space-x-2">

View File

@ -315,7 +315,7 @@
<input
bind:value={sshKey}
class="
whitespece-pre w-full select-all rounded border border-light-200 bg-white p-2 font-mono dark:border-dark-400 dark:bg-dark-700"
whitespece-pre input w-full select-all p-2 font-mono"
/>
</div>
<div class="flex flex-row justify-end space-x-2">

View File

@ -23,8 +23,9 @@ textarea {
.input,
.textarea {
@apply text-color-2 border border-light-500 bg-white p-1 dark:border-dark-400 dark:bg-dark-600;
@apply text-color-2 rounded border border-light-500 px-2 py-1.5 dark:border-dark-400 dark:bg-dark-600;
@apply focus:ring-2 focus:ring-purple-600;
background-color: var(--input-bg);
}
/* OUTLINE REMOVAL */

View File

@ -20,14 +20,16 @@
--bg-body: var(--background-4);
--bg-surface: var(--background-1);
--bg-surface-highlight: var(--background-3);
--border-surface: var(--border-color-2);
--bg-card: var(--background-2);
--bg-card-highlight: var(--background-4);
--border-card: var(--border-color-3);
--border-surface: var(--border-color-2);
--resizer-bg: var(--background-5);
--resizer-bg-active: #fbbf24;
--input-bg: var(--background-2);
}
:root.dark {
@ -49,16 +51,19 @@
--border-color-5: #d4d4d8;
--bg-body: var(--background-1);
--bg-surface: var(--background-2);
--bg-surface-highlight: var(--background-3);
--border-surface: var(--border-color-3);
--bg-card: var(--background-3);
--bg-card-highlight: var(--background-4);
--border-card: var(--border-color-3);
--border-surface: var(--border-color-3);
--resizer-bg: var(--background-2);
--resizer-bg-active: #b45309;
--input-bg: var(--background-2);
}
/* Utility Classes */