Display a bottom border on inputs, not completely transparent

src/styles/_app_base.sass

@@ -175,10 +175,7 @@ nav.sidebar
 .input-group-flex
 	display: flex
 
-	.input-transparent-group+.input-transparent-group
-		margin-left: 10px
-
-.input-transparent-group
+.input-group
 	width: 100%
 	display: flex
 	align-items: center
@@ -201,17 +198,30 @@ select.input-transparent
 input, input.form-control
 	background-color: transparent
 
-.input-transparent
-	border: thin solid transparent
-	border-radius: 3px
-	padding: 5px
-	margin-top: 10px
-	margin-bottom: 10px
-	width: 100%
+.input-group
+	input, textarea, select
+		border-radius: 0
 
-	&:hover
-		border: thin solid $color-text-dark-hint
+	input, textarea, select
+		border: thin solid transparent
+		border-bottom-color: $color-background-dark
+		padding: 5px
+		margin-top: 10px
+		margin-bottom: 10px
+		width: 100%
 
+		transition: all 150ms ease-in-out
+
+		&:hover
+			border-bottom-color: $color-text-dark-secondary
+
+		&:focus
+			outline: 0
+			border-bottom-color: $color-primary
+			box-shadow: 0 1px 0 0 $color-primary
+
+	select
+		border-radius: 3px
 
 #status-bar
 	color: $color-text-dark-secondary

src/styles/_tasks.sass

@@ -9,9 +9,13 @@
 
 	.item-name
 		font-size: 1.6em
-	h2.item-name
+		margin: 0
+
+		+text-overflow-ellipsis
+
+	span.item-name
 		padding-left: 5px
-		margin-top: 10px
+		margin-top: 0
 
 	.item-description
 		padding: 10px 5px

src/templates/attract/shots/view_shot_embed.jade

@@ -1,8 +1,8 @@
 .attract-box.shot.with-status(class="status-{{ shot.properties.status }}")
 	form#shot_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')")
 		input(type='hidden',name='_etag',value='{{ shot._etag }}')
-		.input-transparent-group
-			h2.item-name(title="Shot names can only be updated from Blender.") {{ shot.name | hide_none }}
+		.input-group
+			span.item-name(title="Shot names can only be updated from Blender.") {{ shot.name | hide_none }}
 			button.copy-to-clipboard.btn.item-id(
 				style="margin-left: auto",
 				name="Copy to Clipboard",
@@ -12,14 +12,14 @@
 				| ID
 
 		| {% if 'PUT' in shot.allowed_methods %}
-		.input-transparent-group
+		.input-group
 			textarea#item-description.input-transparent(
 				name="description",
 				type="text",
 				rows=1,
 				placeholder='Description') {{ shot.description | hide_none }}
 
-		.input-transparent-group
+		.input-group
 			label(for="shot-status") Status:
 			select.input-transparent#shot-status(
 				name="status")
@@ -27,7 +27,7 @@
 				| <option value="{{ status }}" {% if status == shot.properties.status %}selected{% endif %}>{{ status | undertitle }}</option>
 				| {% endfor %}
 
-		.input-transparent-group
+		.input-group
 			textarea#item-notes.input-transparent(
 				name="notes",
 				type="text",
@@ -36,7 +36,7 @@
 
 		.input-group-separator
 
-		.input-transparent-group
+		.input-group
 
 			button#item-save.btn.btn-default.btn-block(type=submit)
 				i.pi-check

src/templates/attract/tasks/view_task_embed.jade

@@ -3,15 +3,15 @@
 	form#task_form(onsubmit="return task_save('{{task._id}}', '{{ url_for('attract.tasks.perproject.save', project_url=project['url'], task_id=task._id) }}')")
 		input(type='hidden',name='_etag',value='{{ task._etag }}')
 		//- NOTE: if you add fields here, also add them read-only below.
-		.input-transparent-group
+		.input-group
 			| {% if 'PUT' in task.allowed_methods %}
-			input.input-transparent.item-name(
+			input.item-name(
 				name="name",
 				type="text",
-				placeholder='Name',
+				placeholder='Task Title',
 				value="{{ task.name | hide_none }}")
 			| {% else %}
-			h2.item-name {{ task.name | hide_none }}
+			span.item-name {{ task.name | hide_none }}
 			| {% endif %}
 
 			.dropdown(style='margin-left: auto')
@@ -40,17 +40,17 @@
 					| {% endif %}
 
 		| {% if 'PUT' in task.allowed_methods %}
-		.input-transparent-group
-			textarea#task-description.input-transparent(
+		.input-group
+			textarea#task-description(
 				name="description",
 				type="text",
 				rows=1,
 				placeholder='Description') {{ task.description | hide_none }}
 
 		.input-group-flex
-			.input-transparent-group.field-type
+			.input-group.field-type
 				label#task-task_type Type:
-				select.input-transparent(name="task_type",aria-describedby="task-task_type")
+				select(name="task_type",aria-describedby="task-task_type")
 					| {% for task_type in attract_props.task_types.attract_shot %}
 					| <option value="{{ task_type }}" {% if task_type == task.properties.task_type %}selected{% endif %}>{{ task_type | undertitle }}</option>
 					| {% endfor %}
@@ -58,9 +58,9 @@
 					option(value="{{ task.properties.task_type }}",selected).invalid_task {{ task.properties.task_type | undertitle }}
 					| {% endif %}
 
-			.input-transparent-group
+			.input-group
 				label#task-status Status:
-				select.input-transparent(
+				select(
 					name="status",
 					aria-describedby="task-status")
 					| {% for status in task_node_type.dyn_schema.status.allowed %}
@@ -69,9 +69,9 @@
 
 		.input-group-separator
 
-		.input-transparent-group.select_multiple
+		.input-group.select_multiple
 			label Assignees:
-			select#assignees.input-transparent(
+			select#assignees(
 			name="users",
 			multiple,
 			placeholder="Assigned to"
@@ -82,7 +82,7 @@
 
 		.input-group-separator
 
-		.input-transparent-group
+		.input-group
 			button#item-save.btn.btn-default.btn-block(type='submit')
 				i.pi-check
 				|  Save Task