setPassword(e.target.value)}
diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx
index baf36a4..a08d59c 100644
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -235,6 +235,7 @@ export function ProjectsPage() {
Code (2-10 characters, uppercase)
setFormCode(e.target.value)}
@@ -249,6 +250,7 @@ export function ProjectsPage() {
setFormName(e.target.value)}
@@ -259,6 +261,7 @@ export function ProjectsPage() {
setFormDesc(e.target.value)}
diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx
index abb0eeb..6e72063 100644
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -436,6 +436,7 @@ function SegmentBlock({
})
}
required
+ className="silo-input"
style={inlineInputStyle}
autoFocus
/>
@@ -573,6 +574,7 @@ function SegmentBlock({
}
placeholder="Code"
required
+ className="silo-input"
style={inlineInputStyle}
autoFocus
/>
@@ -597,6 +599,7 @@ function SegmentBlock({
}
placeholder="Description"
required
+ className="silo-input"
style={inlineInputStyle}
/>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 0713022..49a5d48 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -1,4 +1,5 @@
@import "./theme.css";
+@import "./silo-base.css";
*,
*::before,
diff --git a/web/src/styles/silo-base.css b/web/src/styles/silo-base.css
new file mode 100644
index 0000000..ef690c9
--- /dev/null
+++ b/web/src/styles/silo-base.css
@@ -0,0 +1,14 @@
+/* Focus and hover states for form inputs */
+.silo-input {
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.silo-input:hover {
+ border-color: var(--ctp-overlay0);
+}
+
+.silo-input:focus {
+ border-color: var(--ctp-mauve);
+ box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25);
+ outline: none;
+}