Add optional input field illustration feather icon

assets/sass/_vars.scss

@@ -9,6 +9,7 @@ $defaultTextColor: #ffffff;
 $headerBackground: darken($primary, 7.5%);
 $footerBackground: lighten($headerBackground, 1%);
 $panelBackground: lighten($headerBackground, 1%);
+$inputBackground: darken($panelBackground, 4%);
 
 $info: #4499ff;
 $infoText: darken($info, 42%);

assets/sass/layout.scss

@@ -353,6 +353,20 @@ form {
 		display: flex;
 		flex-direction: column;
 		margin: 16px auto;
+		background: $inputBackground;
+		border-radius: 5px;
+		overflow: hidden;
+
+		> .feather.icon {
+			position: absolute;
+			top: 50%;
+			right: 8px;
+			transform: translateY(-50%);
+			z-index: 0;
+
+			--icon-size: 24px;
+			opacity: 0.75;
+		}
 
 		label {
 			position: absolute;
@@ -379,10 +393,10 @@ form {
 		}
 
 		input, select, textarea, .input-group {
+			z-index: 1;
 			border: 0;
 			color: $defaultTextColor;
-			background: lighten($panelBackground, 4%);
-			border-radius: 5px;
+			background: transparent;
 			font-size: 16px;
 
 			&:focus, &:not([value=""]), &[type="file"] {
@@ -435,17 +449,22 @@ form {
 
 		&.inline {
 			flex-direction: row;
+			align-items: center;
 
 			input[type=checkbox] {
-				text-align: left;
 				width: min-content;
 				height: min-content;
+				margin: 8px;
+				text-align: left;
 
 				& ~ label {
 					position: static;
+					flex-grow: 1;
 					display: inline;
-					padding-left: 8px;
+					padding: 8px;
+
 					font-size: 16px;
+					text-align: left;
 				}
 			}
 		}