From 3e99a6336cc7d3bf977d24f68b1f456ce14ee140 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sun, 16 Feb 2014 16:03:13 +0100
Subject: [PATCH] Form CSS overhaul

---
 public_html/media/css/auth.css        |  14 ++--
 public_html/media/css/core.css        | 115 ++++++++++++--------------
 public_html/media/css/logs.css        |   3 +-
 public_html/media/css/post-list.css   |   9 +-
 public_html/media/css/post-upload.css |  33 +++-----
 public_html/media/css/post-view.css   |   3 -
 public_html/media/css/tag-list.css    |  13 +--
 public_html/media/css/user-view.css   |  22 ++---
 src/Views/auth-login.phtml            |  22 +++--
 src/Views/comment-add.phtml           |   6 +-
 src/Views/comment-edit.phtml          |   6 +-
 src/Views/post-edit.phtml             |  48 +++++------
 src/Views/post-upload.phtml           |  43 +++++-----
 src/Views/tag-mass-tag.phtml          |  15 ++--
 src/Views/tag-merge.phtml             |  15 ++--
 src/Views/tag-rename.phtml            |  15 ++--
 src/Views/user-delete.phtml           |  10 +--
 src/Views/user-edit.phtml             |  30 +++----
 src/Views/user-registration.phtml     |  34 ++++----
 src/Views/user-select.phtml           |  10 +--
 src/Views/user-settings.phtml         |  22 ++---
 21 files changed, 224 insertions(+), 264 deletions(-)

diff --git a/public_html/media/css/auth.css b/public_html/media/css/auth.css
index 513389ed..98da9139 100644
--- a/public_html/media/css/auth.css
+++ b/public_html/media/css/auth.css
@@ -1,30 +1,30 @@
-form.auth {
+#content form {
 	margin: 0 auto;
 	max-width: 400px;
 }
 
-form.auth label.left {
+#content form label {
 	width: 35%;
 }
 
-form.auth p {
+#content form p {
 	text-align: center;
 	margin: 10px 0;
 }
 
-form.auth .help {
+#content form .help {
 	opacity: .5;
 	margin-top: 1em;
 	font-size: small;
 }
-form.auth .help p {
+#content form .help p {
 	margin: 0;
 	text-align: left;
 }
-form.auth .help label+div {
+#content form .help label+div {
 	float: left;
 }
-form.auth .help ul {
+#content form .help ul {
 	margin: 0;
 	padding: 0;
 }
diff --git a/public_html/media/css/core.css b/public_html/media/css/core.css
index e0b87db1..0fcc2e4f 100644
--- a/public_html/media/css/core.css
+++ b/public_html/media/css/core.css
@@ -88,11 +88,10 @@ body {
 }
 #top-nav li.search input {
 	border: 0;
-	height: 20px;
-	line-height: 20px;
-	padding: 4px 10px;
+	height: 28px;
+	line-height: 28px;
+	padding: 0 10px;
 	margin: 0;
-	box-sizing: content-box;
 }
 
 #top-nav li.safety {
@@ -237,42 +236,38 @@ a:hover i[class*='icon-'] {
 
 
 
-form.aligned input,
-form.aligned button {
-	vertical-align: text-top;
-}
-form.aligned label {
+.form-row>label {
+	display: inline-block;
 	text-align: right;
 	vertical-align: middle;
-}
-form.aligned label.left {
-	display: inline-block;
 	padding-right: 1em;
-	width: 5em;
+	width: 7em;
 	min-height: 1em;
 	float: left;
 }
-form.aligned>div {
-	margin-bottom: 0.5em;
-	clear: left;
-}
-form.aligned label,
-form.aligned input,
-form.aligned select,
-form.aligned button {
+label,
+input:not([type=radio]):not([type=checkbox]):not([type=file]),
+select,
+button {
+	-webkit-box-sizing: border-box !important;
+	-moz-box-sizing: border-box !important;
+	box-sizing: border-box !important;
 	vertical-align: middle;
-	line-height: 20px;
+	line-height: 24px;
+	height: 34px;
 }
-form.aligned label,
-form.aligned input,
-form.aligned select {
+label,
+input,
+select {
 	padding: 5px;
+	font-family: inherit;
+	font-size: 11pt;
 }
-form.aligned input[type=file] {
+input[type=file] {
 	padding: 5px 0;
 }
-form.aligned input[type=radio],
-form.aligned input[type=checkbox] {
+input[type=radio],
+input[type=checkbox] {
 	width: auto;
 	max-width: auto;
 	margin: 0 10px 0 0;
@@ -280,51 +275,49 @@ form.aligned input[type=checkbox] {
 	vertical-align: middle;
 }
 
+button {
+	font-size: 12pt;
+	border-radius: 5px;
+	padding: 5px 15px;
+	-moz-box-sizing: border-box;
+	color: white;
+	background: hsl(205,70%,70%);
+	border: 0;
+}
+button:hover {
+	background-color: hsl(205,70%,60%);
+	cursor: pointer;
+}
+
+.form-row {
+	margin: 0.25em 0;
+	clear: left;
+}
 .input-wrapper {
 	overflow: hidden;
 	display: block;
 }
-.input-wrapper ul.tagit,
-.input-wrapper input,
-.input-wrapper textarea,
-.input-wrapper select {
-	width: 100%;
-	max-width: 100%;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
 
-label {
-	display: inline-block;
-}
-label,
-input,
-select,
-button {
-	font-family: inherit;
-	font-size: 11pt;
-}
 ul.tagit,
 select,
 textarea,
 input:not([type=radio]):not([type=checkbox]):not([type=file]) {
+	width: 100%;
+	max-width: 100%;
 	border: 1px solid #ccc;
-	border-radius: 3px;
+	border-radius: 5px;
+}
+
+ul.tagit {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 ul.tagit input {
 	border: 0 !important;
-}
-button {
-	font-size: 115%;
-	padding: 0.2em 0.7em;
-	color: white;
-	background: cornflowerblue;
-	border: 0;
-}
-button:hover {
-	background-color: royalblue;
-	cursor: pointer;
+	line-height: auto !important;
+	height: auto !important;
+	margin: -4px 0 !important;
 }
 
 
@@ -368,7 +361,7 @@ button:hover {
 	border-style: solid;
 	border-width: 1px;
 	max-width: 500px;
-	margin: 2em auto !important;
+	margin: 2em auto;
 }
 
 .alert-success {
diff --git a/public_html/media/css/logs.css b/public_html/media/css/logs.css
index 01c250ec..bb96f81b 100644
--- a/public_html/media/css/logs.css
+++ b/public_html/media/css/logs.css
@@ -4,8 +4,7 @@
 
 #content input {
 	margin: 0 1em;
-	height: 25px;
-	vertical-align: middle;
+	max-width: 50%;
 }
 
 pre {
diff --git a/public_html/media/css/post-list.css b/public_html/media/css/post-list.css
index 50510653..ff9694af 100644
--- a/public_html/media/css/post-list.css
+++ b/public_html/media/css/post-list.css
@@ -10,19 +10,20 @@
 
 .form-wrapper {
 	text-align: center;
+	margin-bottom: 1em;
 }
 .small-screen .form-wrapper {
 	width: 100%;
 }
-form.aligned {
+#content form {
 	margin: 0 auto;
 	width: 24em;
 	text-align: left;
 }
-form.aligned label.left {
-	width: 7em;
+#content form label {
+	width: 9em;
 }
-form h1 {
+#content form h1 {
 	display: none;
 }
 
diff --git a/public_html/media/css/post-upload.css b/public_html/media/css/post-upload.css
index e3c0eb7d..12b1b41b 100644
--- a/public_html/media/css/post-upload.css
+++ b/public_html/media/css/post-upload.css
@@ -34,19 +34,14 @@
 	margin-top: 0.5em;
 	position: relative;
 }
-#url-handler input {
-	padding: 0.5em;
-}
 #url-handler .input-wrapper {
-	margin-right: 7.5em;
+	margin-right: 8.5em;
 }
 #url-handler button {
-	font-size: initial;
-	padding: 0.5em;
 	position: absolute;
 	top: 0;
 	right: 0;
-	width: 7em;
+	width: 8em;
 }
 
 .post .thumbnail {
@@ -119,19 +114,6 @@
 	font-size: 130%;
 }
 
-.post label {
-	line-height: 33px;
-}
-.post label.left {
-	display: inline-block;
-	width: 60px;
-	padding-right: 10px;
-	float: left;
-}
-.post .safety label:not(.left) {
-	margin-right: 0.75em;
-}
-
 .post .file-name strong {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -139,7 +121,7 @@
 	white-space: pre;
 	display: inline-block;
 	vertical-align: middle;
-	line-height: 33px;
+	padding: 0.5em 0;
 }
 
 .safety-safe {
@@ -159,8 +141,15 @@ ul.tagit {
 	font-size: 1em;
 }
 
+.submit-wrapper {
+	text-align: center;
+}
 #the-submit {
-	margin: 0 0 0 205px;
+	margin: 0 auto;
+	font-size: 14.5pt;
+	padding: 0.35em 2em;
+	height: auto;
+	line-height: auto;
 }
 
 .post .form-wrapper {
diff --git a/public_html/media/css/post-view.css b/public_html/media/css/post-view.css
index a7cc1039..c46c7f80 100644
--- a/public_html/media/css/post-view.css
+++ b/public_html/media/css/post-view.css
@@ -136,9 +136,6 @@ i.icon-dl {
 .unit.edit-post {
 	display: none;
 }
-form.edit-post .safety label:not(.left) {
-	margin-right: 0.75em;
-}
 ul.tagit {
 	display: block;
 	vertical-align: middle;
diff --git a/public_html/media/css/tag-list.css b/public_html/media/css/tag-list.css
index 6c60f95a..4b63f790 100644
--- a/public_html/media/css/tag-list.css
+++ b/public_html/media/css/tag-list.css
@@ -17,22 +17,15 @@
 }
 
 .form-wrapper {
-	width: 50%;
 	max-width: 24em;
-	display: inline-block;
-	text-align: center;
 }
 .small-screen .form-wrapper {
 	width: 100%;
 }
-form.aligned {
-	text-align: left;
-	margin: 0 auto;
+#content form label {
+	width: 9em;
 }
-form.aligned label.left {
-	width: 7em;
-}
-form h1 {
+#content form h1 {
 	display: none;
 }
 
diff --git a/public_html/media/css/user-view.css b/public_html/media/css/user-view.css
index 91d714d2..2902916a 100644
--- a/public_html/media/css/user-view.css
+++ b/public_html/media/css/user-view.css
@@ -12,22 +12,12 @@
 	padding: 0;
 }
 
-form.settings label.left,
-form.delete label.left,
-form.edit label.left {
-	width: 9em;
+#content form {
+	max-width: 30em;
 }
-
-form.settings .alert,
-form.delete .alert,
-form.edit .alert {
+#content form label {
+	width: 10em;
+}
+#content form .alert {
 	margin: 1em 0;
 }
-
-form.settings input,
-form.delete input,
-form.edit select,
-form.edit input {
-	width: 16em;
-	max-width: 90%;
-}
diff --git a/src/Views/auth-login.phtml b/src/Views/auth-login.phtml
index 17ad8288..4defa9af 100644
--- a/src/Views/auth-login.phtml
+++ b/src/Views/auth-login.phtml
@@ -3,23 +3,21 @@ LayoutHelper::setSubTitle('authentication form');
 LayoutHelper::addStylesheet('auth.css');
 ?>
 
-<form action="<?php echo \Chibi\UrlHelper::route('auth', 'login') ?>" class="auth aligned" method="post">
-	<div>
-		<p>If you don't have an account yet,<br/><a href="<?php echo \Chibi\UrlHelper::route('user', 'registration'); ?>">click here</a> to create a new one.</p>
-	</div>
+<form action="<?php echo \Chibi\UrlHelper::route('auth', 'login') ?>" class="auth" method="post">
+	<p>If you don't have an account yet,<br/><a href="<?php echo \Chibi\UrlHelper::route('user', 'registration'); ?>">click here</a> to create a new one.</p>
 
-	<div>
-		<label class="left" for="name">User name:</label>
+	<div class="form-row">
+		<label for="name">User name:</label>
 		<div class="input-wrapper"><input type="text" id="name" name="name"/></div>
 	</div>
 
-	<div>
-		<label class="left" for="password">Password:</label>
+	<div class="form-row">
+		<label for="password">Password:</label>
 		<div class="input-wrapper"><input type="password" id="password" name="password"/></div>
 	</div>
 
-	<div>
-		<label class="left">&nbsp;</label>
+	<div class="form-row">
+		<label></label>
 		<div class="input-wrapper">
 			<button class="submit" type="submit">Log in</button>
 			&nbsp;
@@ -35,8 +33,8 @@ LayoutHelper::addStylesheet('auth.css');
 
 	<input type="hidden" name="submit" value="1"/>
 
-	<div class="help">
-		<label class="left">&nbsp;</label>
+	<div class="form-row help">
+		<label></label>
 		<div>
 			<p>Problems logging in?</p>
 			<ul>
diff --git a/src/Views/comment-add.phtml b/src/Views/comment-add.phtml
index 2ef5c8d6..ca581dc2 100644
--- a/src/Views/comment-add.phtml
+++ b/src/Views/comment-add.phtml
@@ -3,18 +3,18 @@ LayoutHelper::addStylesheet('comment-edit.css');
 LayoutHelper::addScript('comment-edit.js');
 ?>
 
-<form action="<?php echo \Chibi\UrlHelper::route('comment', 'add', ['postId' => $this->context->transport->post->id]) ?>" method="post" class="add-comment aligned">
+<form action="<?php echo \Chibi\UrlHelper::route('comment', 'add', ['postId' => $this->context->transport->post->id]) ?>" method="post" class="add-comment">
 	<h1>add comment</h1>
 
 	<div class="preview"></div>
 
-	<div class="text">
+	<div class="form-row text">
 		<div class="input-wrapper"><textarea name="text" cols="50" rows="3"></textarea></div>
 	</div>
 
 	<input type="hidden" name="submit" value="1"/>
 
-	<div>
+	<div class="form-row">
 		<button name="sender" class="submit" type="submit" value="preview">Preview</button>&nbsp;
 		<button name="sender" class="submit" type="submit" value="submit">Submit</button>
 	</div>
diff --git a/src/Views/comment-edit.phtml b/src/Views/comment-edit.phtml
index 790019b1..6069f03a 100644
--- a/src/Views/comment-edit.phtml
+++ b/src/Views/comment-edit.phtml
@@ -3,18 +3,18 @@ LayoutHelper::addStylesheet('comment-edit.css');
 LayoutHelper::addScript('comment-edit.js');
 ?>
 
-<form action="<?php echo \Chibi\UrlHelper::route('comment', 'edit', ['id' => $this->context->transport->comment->id]) ?>" method="post" class="edit-comment aligned">
+<form action="<?php echo \Chibi\UrlHelper::route('comment', 'edit', ['id' => $this->context->transport->comment->id]) ?>" method="post" class="edit-comment">
 	<h1>edit comment</h1>
 
 	<div class="preview"></div>
 
-	<div class="text">
+	<div class="form-row text">
 		<div class="input-wrapper"><textarea name="text" cols="50" rows="3"><?php echo TextHelper::secureWhitespace($this->context->transport->comment->text) ?></textarea></div>
 	</div>
 
 	<input type="hidden" name="submit" value="1"/>
 
-	<div>
+	<div class="form-row">
 		<button name="sender" class="submit" type="submit" value="preview">Preview</button>&nbsp;
 		<button name="sender" class="submit" type="submit" value="submit">Submit</button>
 	</div>
diff --git a/src/Views/post-edit.phtml b/src/Views/post-edit.phtml
index 75dd80ea..1b89afdc 100644
--- a/src/Views/post-edit.phtml
+++ b/src/Views/post-edit.phtml
@@ -1,54 +1,56 @@
-<form action="<?php echo \Chibi\UrlHelper::route('post', 'edit', ['id' => $this->context->transport->post->id]) ?>" method="post" enctype="multipart/form-data" class="edit-post aligned">
+<form action="<?php echo \Chibi\UrlHelper::route('post', 'edit', ['id' => $this->context->transport->post->id]) ?>" method="post" enctype="multipart/form-data" class="edit-post">
 	<h1>edit post</h1>
 	<?php if (PrivilegesHelper::confirm(Privilege::EditPostSafety, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->post->getUploader()))): ?>
-		<div class="safety">
-			<label class="left">Safety:</label>
-			<?php foreach (PostSafety::getAll() as $safety): ?>
-				<label>
-					<input type="radio" name="safety" value="<?php echo $safety ?>" <?php if ($this->context->transport->post->safety == $safety) echo 'checked="checked"' ?>/>
-					&nbsp;<?php echo TextHelper::camelCaseToHumanCase(PostSafety::toString($safety), true) ?>
-				</label>
-			<?php endforeach ?>
+		<div class="form-row safety">
+			<label>Safety:</label>
+			<div class="input-wrapper">
+				<?php foreach (PostSafety::getAll() as $safety): ?>
+					<label>
+						<input type="radio" name="safety" value="<?php echo $safety ?>" <?php if ($this->context->transport->post->safety == $safety) echo 'checked="checked"' ?>/>
+						&nbsp;<?php echo TextHelper::camelCaseToHumanCase(PostSafety::toString($safety), true) ?>
+					</label>
+				<?php endforeach ?>
+			</div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::EditPostTags, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->post->getUploader()))): ?>
-		<div class="tags">
-			<label class="left" for="tags">Tags:</label>
+		<div class="form-row tags">
+			<label for="tags">Tags:</label>
 			<div class="input-wrapper"><input type="text" name="tags" id="tags" placeholder="enter some tags&hellip;" value="<?php echo join(',', array_map(function($tag) { return $tag->name; }, $this->context->transport->post->getTags())) ?>"/></div>
 		</div>
 		<input type="hidden" name="edit-token" id="edit-token" value="<?php echo $this->context->transport->post->getEditToken() ?>"/>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::EditPostSource, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->post->getUploader()))): ?>
-		<div class="source">
-			<label class="left" for="source">Source:</label>
+		<div class="form-row source">
+			<label for="source">Source:</label>
 			<div class="input-wrapper"><input type="text" name="source" id="source" value="<?php echo $this->context->transport->post->source ?>"/></div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::EditPostRelations, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->post->getUploader()))): ?>
-		<div class="thumb">
-			<label class="left" for="relations">Relations:</label>
+		<div class="form-row thumb">
+			<label for="relations">Relations:</label>
 			<div class="input-wrapper"><input type="text" name="relations" id="relations" placeholder="id1,id2,&hellip;" value="<?php echo join(',', array_map(function($post) { return $post->id; }, $this->context->transport->post->getRelations())) ?>"/></div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::EditPostFile, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->post->getUploader()))): ?>
-		<div class="url">
-			<label class="left" for="url">File:</label>
+		<div class="form-row url">
+			<label for="url">File:</label>
 			<div class="input-wrapper"><input type="text" name="url" id="url" placeholder="Some url&hellip;"/></div>
 		</div>
 
-		<div class="file">
-			<label class="left" for="file"></label>
+		<div class="form-row file">
+			<label for="file"></label>
 			<div class="input-wrapper"><input type="file" name="file" id="file"/></div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::EditPostThumb, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->post->getUploader()))): ?>
-		<div class="thumb">
-			<label class="left" for="thumb">Thumb:</label>
+		<div class="form-row thumb">
+			<label for="thumb">Thumb:</label>
 			<div class="input-wrapper">
 				<input type="file" name="thumb" id="thumb"/>
 				<?php if ($this->context->transport->post->hasCustomThumb()): ?>
@@ -60,8 +62,8 @@
 
 	<input type="hidden" name="submit" value="1"/>
 
-	<div>
-		<label class="left">&nbsp;</label>
+	<div class="form-row">
+		<label></label>
 		<button class="submit" type="submit">Submit</button>
 	</div>
 </form>
diff --git a/src/Views/post-upload.phtml b/src/Views/post-upload.phtml
index 699582c3..66f59712 100644
--- a/src/Views/post-upload.phtml
+++ b/src/Views/post-upload.phtml
@@ -67,37 +67,38 @@ LayoutHelper::addScript('../lib/tagit/jquery.tagit.js');
 				</a>
 			</div>
 
-			<form action="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>" method="post" class="aligned">
-				<div class="file-name">
-					<label class="left">File:</label>
+			<form action="<?php echo \Chibi\UrlHelper::route('post', 'upload') ?>" method="post">
+				<div class="form-row file-name">
+					<label>File:</label>
 					<strong>filename.jpg</strong>
 				</div>
 
-				<div class="safety">
-					<label class="left">Safety:</label>
-					<?php $checked = false ?>
-					<?php foreach (PostSafety::getAll() as $safety): ?>
+				<div class="form-row safety">
+					<label>Safety:</label>
+					<div class="input-wrapper">
+						<?php $checked = false ?>
+						<?php foreach (PostSafety::getAll() as $safety): ?>
+							<label>
+								<input type="radio" name="safety" value="<?php echo $safety ?>"<?php if (!$checked) echo ' checked="checked"' ?>/>
+								<?php echo TextHelper::camelCaseToHumanCase(PostSafety::toString($safety), true) ?>
+								<?php $checked = true ?>
+							</label>
+						<?php endforeach ?>
+						<input type="hidden" name="anonymous" value="0"/>
 						<label>
-							<input type="radio" name="safety" value="<?php echo $safety ?>"<?php if (!$checked) echo ' checked="checked"' ?>/>
-							<?php echo TextHelper::camelCaseToHumanCase(PostSafety::toString($safety), true) ?>
-							<?php $checked = true ?>
+							<input type="checkbox" name="anonymous" value="1"/>
+							Upload anonymously
 						</label>
-					<?php endforeach ?>
-					<input type="hidden" name="anonymous" value="0"/>
-					<label>
-						<input type="checkbox" name="anonymous" value="1"/>
-						Upload anonymously
-					</label>
-
+					</div>
 				</div>
 
-				<div class="tags">
-					<label class="left">Tags:</label>
+				<div class="form-row tags">
+					<label>Tags:</label>
 					<div class="input-wrapper"><input type="text" name="tags" placeholder="enter some tags&hellip;"/></div>
 				</div>
 
-				<div class="source">
-					<label class="left">Source:</label>
+				<div class="form-row source">
+					<label>Source:</label>
 					<div class="input-wrapper"><input type="text" name="source" placeholder="where did you get this from? (optional)"/></div>
 				</div>
 
diff --git a/src/Views/tag-mass-tag.phtml b/src/Views/tag-mass-tag.phtml
index 182c5777..fdeccbe3 100644
--- a/src/Views/tag-mass-tag.phtml
+++ b/src/Views/tag-mass-tag.phtml
@@ -1,20 +1,21 @@
 <div class="form-wrapper">
-	<form class="aligned" method="post" action="<?php echo \Chibi\UrlHelper::route('tag', 'mass-tag-redirect') ?>">
+	<form method="post" action="<?php echo \Chibi\UrlHelper::route('tag', 'mass-tag-redirect') ?>">
 		<h1>mass tag</h1>
-		<div>
-			<label class="left" for="mass-tag-query">Search query:</label>
+
+		<div class="form-row">
+			<label for="mass-tag-query">Search query:</label>
 			<div class="input-wrapper"><input class="autocomplete" type="text" name="query" id="mass-tag-query" value="<?php echo isset($this->context->massTagQuery) ? $this->context->massTagQuery : '' ?>" data-autocomplete-url="<?php echo \Chibi\UrlHelper::route('tag', 'list') ?>"/></div>
 		</div>
 
-		<div>
-			<label class="left" for="mass-tag-tag">Tag:</label>
+		<div class="form-row">
+			<label for="mass-tag-tag">Tag:</label>
 			<div class="input-wrapper"><input class="autocomplete" type="text" name="tag" id="mass-tag-tag" value="<?php echo isset($this->context->massTagTag) ? $this->context->massTagTag : '' ?>" data-autocomplete-url="<?php echo \Chibi\UrlHelper::route('tag', 'list') ?>"/></div>
 		</div>
 
 		<input type="hidden" name="submit" value="1"/>
 
-		<div>
-			<label class="left">&nbsp;</label>
+		<div class="form-row">
+			<label></label>
 			<button class="submit" type="submit">Tag!</button>
 		</div>
 	</form>
diff --git a/src/Views/tag-merge.phtml b/src/Views/tag-merge.phtml
index 9418b753..6dd65257 100644
--- a/src/Views/tag-merge.phtml
+++ b/src/Views/tag-merge.phtml
@@ -1,20 +1,21 @@
 <div class="form-wrapper">
-	<form class="aligned" method="post" action="<?php echo \Chibi\UrlHelper::route('tag', 'merge') ?>">
+	<form method="post" action="<?php echo \Chibi\UrlHelper::route('tag', 'merge') ?>">
 		<h1>merge tags</h1>
-		<div>
-			<label class="left" for="merge-source-tag">Source tag:</label>
+
+		<div class="form-row">
+			<label for="merge-source-tag">Source tag:</label>
 			<div class="input-wrapper"><input class="autocomplete" type="text" name="source-tag" id="merge-source-tag" data-autocomplete-url="<?php echo \Chibi\UrlHelper::route('tag', 'list') ?>"/></div>
 		</div>
 
-		<div>
-			<label class="left" for="merge-target-tag">Target tag:</label>
+		<div class="form-row">
+			<label for="merge-target-tag">Target tag:</label>
 			<div class="input-wrapper"><input class="autocomplete" type="text" name="target-tag" id="merge-target-tag" data-autocomplete-url="<?php echo \Chibi\UrlHelper::route('tag', 'list') ?>"/></div>
 		</div>
 
 		<input type="hidden" name="submit" value="1"/>
 
-		<div>
-			<label class="left">&nbsp;</label>
+		<div class="form-row">
+			<label></label>
 			<button class="submit" type="submit">Merge!</button>
 		</div>
 	</form>
diff --git a/src/Views/tag-rename.phtml b/src/Views/tag-rename.phtml
index 50a34857..cd353dc4 100644
--- a/src/Views/tag-rename.phtml
+++ b/src/Views/tag-rename.phtml
@@ -1,20 +1,21 @@
 <div class="form-wrapper">
-	<form class="aligned simple-action" method="post" action="<?php echo \Chibi\UrlHelper::route('tag', 'rename') ?>">
+	<form method="post" action="<?php echo \Chibi\UrlHelper::route('tag', 'rename') ?>">
 		<h1>rename tags</h1>
-		<div>
-			<label class="left" for="rename-source-tag">Source tag:</label>
+
+		<div class="form-row">
+			<label for="rename-source-tag">Source tag:</label>
 			<div class="input-wrapper"><input class="autocomplete" type="text" name="source-tag" id="rename-source-tag" data-autocomplete-url="<?php echo \Chibi\UrlHelper::route('tag', 'list') ?>"/></div>
 		</div>
 
-		<div>
-			<label class="left" for="rename-target-tag">Target tag:</label>
+		<div class="form-row">
+			<label for="rename-target-tag">Target tag:</label>
 			<div class="input-wrapper"><input type="text" name="target-tag" id="rename-target-tag"/></div>
 		</div>
 
 		<input type="hidden" name="submit" value="1"/>
 
-		<div>
-			<label class="left">&nbsp;</label>
+		<div class="form-row">
+			<label></label>
 			<button class="submit" type="submit">Rename!</button>
 		</div>
 	</form>
diff --git a/src/Views/user-delete.phtml b/src/Views/user-delete.phtml
index 7b1d1344..35144304 100644
--- a/src/Views/user-delete.phtml
+++ b/src/Views/user-delete.phtml
@@ -1,7 +1,7 @@
-<form action="<?php echo \Chibi\UrlHelper::route('user', 'delete', ['name' => $this->context->transport->user->name]) ?>" method="post" class="delete aligned confirmable" autocomplete="off" data-confirm-text="Are you sure you want to delete your account?">
+<form action="<?php echo \Chibi\UrlHelper::route('user', 'delete', ['name' => $this->context->transport->user->name]) ?>" method="post" class="delete confirmable" autocomplete="off" data-confirm-text="Are you sure you want to delete your account?">
 	<?php if ($this->context->user->id == $this->context->transport->user->id): ?>
-		<div class="current-password">
-			<label class="left" for="current-password">Current password:</label>
+		<div class="form-row current-password">
+			<label for="current-password">Current password:</label>
 			<div class="input-wrapper"><input type="password" name="current-password" id="current-password" placeholder="Current password"/></div>
 		</div>
 	<?php endif ?>
@@ -10,8 +10,8 @@
 
 	<?php $this->renderFile('message') ?>
 
-	<div>
-		<label class="left">&nbsp;</label>
+	<div class="form-row">
+		<label></label>
 		<button class="submit" type="submit">Delete account</button>
 	</div>
 </form>
diff --git a/src/Views/user-edit.phtml b/src/Views/user-edit.phtml
index 66f18b2d..d6da359a 100644
--- a/src/Views/user-edit.phtml
+++ b/src/Views/user-edit.phtml
@@ -1,40 +1,40 @@
-<form action="<?php echo \Chibi\UrlHelper::route('user', 'edit', ['name' => $this->context->transport->user->name]) ?>" method="post" class="edit aligned" autocomplete="off">
+<form action="<?php echo \Chibi\UrlHelper::route('user', 'edit', ['name' => $this->context->transport->user->name]) ?>" method="post" class="edit" autocomplete="off">
 	<?php if ($this->context->user->id == $this->context->transport->user->id): ?>
-		<div class="current-password">
-			<label class="left" for="current-password">Current password:</label>
+		<div class="form-row current-password">
+			<label for="current-password">Current password:</label>
 			<div class="input-wrapper"><input type="password" name="current-password" id="current-password" placeholder="Current password"/></div>
 		</div>
 		<hr>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::ChangeUserName, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->user))): ?>
-		<div class="nickname">
-			<label class="left" for="name">Name:</label>
+		<div class="form-row nickname">
+			<label for="name">Name:</label>
 			<div class="input-wrapper"><input type="text" name="name" id="name" placeholder="New name&hellip;" value="<?php echo $this->context->suppliedName ?>"/></div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::ChangeUserEmail, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->user))): ?>
-		<div class="email">
-			<label class="left" for="name">E-mail:</label>
+		<div class="form-row email">
+			<label for="name">E-mail:</label>
 			<div class="input-wrapper"><input type="text" name="email" id="email" placeholder="New e-mail&hellip;" value="<?php echo $this->context->suppliedEmail ?>"/></div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::ChangeUserPassword, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->user))): ?>
-		<div class="password1">
-			<label class="left" for="password1">New password:</label>
+		<div class="form-row password1">
+			<label for="password1">New password:</label>
 			<div class="input-wrapper"><input type="password" name="password1" id="password1" placeholder="New password&hellip;" value="<?php echo $this->context->suppliedPassword1 ?>"/></div>
 		</div>
-		<div class="password2">
-			<label class="left" for="password2"></label>
+		<div class="form-row password2">
+			<label for="password2"></label>
 			<div class="input-wrapper"><input type="password" name="password2" id="password2" placeholder="New password&hellip; (repeat)" value="<?php echo $this->context->suppliedPassword2 ?>"/></div>
 		</div>
 	<?php endif ?>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::ChangeUserAccessRank, PrivilegesHelper::getIdentitySubPrivilege($this->context->transport->user))): ?>
-		<div class="access-rank">
-			<label class="left" for="access-rank">Access rank:</label>
+		<div class="form-row access-rank">
+			<label for="access-rank">Access rank:</label>
 			<div class="input-wrapper"><select name="access-rank" id="access-rank">
 				<?php foreach (AccessRank::getAll() as $rank): ?>
 					<?php if ($rank == AccessRank::Nobody) continue ?>
@@ -54,8 +54,8 @@
 
 	<?php $this->renderFile('message') ?>
 
-	<div>
-		<label class="left">&nbsp;</label>
+	<div class="form-row">
+		<label></label>
 		<button class="submit" type="submit">Submit</button>
 	</div>
 </form>
diff --git a/src/Views/user-registration.phtml b/src/Views/user-registration.phtml
index b7d8b609..a7599403 100644
--- a/src/Views/user-registration.phtml
+++ b/src/Views/user-registration.phtml
@@ -9,43 +9,37 @@ LayoutHelper::setSubTitle('registration form');
 	LayoutHelper::addStylesheet('auth.css');
 	?>
 
-	<form action="<?php echo \Chibi\UrlHelper::route('auth', 'register') ?>" class="auth aligned" method="post">
-		<div>
-			<p>Registered users can view more content,<br/>upload files and add posts to favorites.</p>
-		</div>
+	<form action="<?php echo \Chibi\UrlHelper::route('auth', 'register') ?>" class="auth" method="post">
+		<p>Registered users can view more content,<br/>upload files and add posts to favorites.</p>
 
-		<div>
-			<label class="left" for="name">User name:</label>
+		<div class="form-row">
+			<label for="name">User name:</label>
 			<div class="input-wrapper"><input type="text" id="name" name="name" value="<?php echo $this->context->suppliedName ?>" placeholder="e.g. darth_vader" autocomplete="off"/></div>
 		</div>
 
-		<div>
-			<label class="left" for="password1">Password:</label>
+		<div class="form-row">
+			<label for="password1">Password:</label>
 			<div class="input-wrapper"><input type="password" id="password1" name="password1" value="<?php echo $this->context->suppliedPassword1 ?>" placeholder="e.g. <?php echo str_repeat('&#x25cf;', 8) ?>" autocomplete="off"/></div>
 		</div>
 
-		<div>
-			<label class="left" for="password2">Password (repeat):</label>
+		<div class="form-row">
+			<label for="password2">Password (repeat):</label>
 			<div class="input-wrapper"><input type="password" id="password2" name="password2" value="<?php echo $this->context->suppliedPassword2 ?>" placeholder="e.g. <?php echo str_repeat('&#x25cf;', 8) ?>" autocomplete="off"/></div>
 		</div>
 
-		<div>
-			<label class="left" for="email">E-mail address:</label>
+		<div class="form-row">
+			<label for="email">E-mail address:</label>
 			<div class="input-wrapper"><input type="text" id="email" name="email" value="<?php echo $this->context->suppliedEmail ?>" placeholder="e.g. vader@empire.gov" autocomplete="off"/></div>
 		</div>
 
-		<div>
-			<p id="email-info">Your e-mail will be used to show your <a href="http://gravatar.com/">Gravatar</a>.<br/>Leave blank for random Gravatar.</p>
-		</div>
+		<p id="email-info">Your e-mail will be used to show your <a href="http://gravatar.com/">Gravatar</a>.<br/>Leave blank for random Gravatar.</p>
 
-		<div>
-			<?php $this->renderFile('message') ?>
-		</div>
+		<?php $this->renderFile('message') ?>
 
 		<input type="hidden" name="submit" value="1"/>
 
-		<div>
-			<label class="left"></label>
+		<div class="form-row">
+			<label></label>
 			<button class="submit" type="submit">Register</button>
 		</div>
 	</form>
diff --git a/src/Views/user-select.phtml b/src/Views/user-select.phtml
index 45577734..35f8ea6b 100644
--- a/src/Views/user-select.phtml
+++ b/src/Views/user-select.phtml
@@ -5,9 +5,9 @@
 	LayoutHelper::addStylesheet('auth.css');
 	?>
 
-	<form action="<?php echo \Chibi\UrlHelper::route($this->context->route->simpleControllerName, $this->context->route->simpleActionName) ?>" method="post" class="auth aligned" autocomplete="off">
-		<div>
-			<label class="left">User:</label>
+	<form action="<?php echo \Chibi\UrlHelper::route($this->context->route->simpleControllerName, $this->context->route->simpleActionName) ?>" method="post" class="auth" autocomplete="off">
+		<div class="form-row">
+			<label>User:</label>
 			<div class="input-wrapper">
 				<input name="name" placeholder="Name or e-mail address" type="text"/>
 			</div>
@@ -17,8 +17,8 @@
 
 		<?php $this->renderFile('message') ?>
 
-		<div>
-			<label class="left">&nbsp;</label>
+		<div class="form-row">
+			<label></label>
 			<button class="submit" type="submit">Continue</button>
 		</div>
 	</form>
diff --git a/src/Views/user-settings.phtml b/src/Views/user-settings.phtml
index 0476936b..774de923 100644
--- a/src/Views/user-settings.phtml
+++ b/src/Views/user-settings.phtml
@@ -1,6 +1,6 @@
-<form action="<?php echo \Chibi\UrlHelper::route('user', 'settings', ['name' => $this->context->transport->user->name]) ?>" method="post" class="settings aligned">
-	<div class="safety">
-		<label class="left">Safety:</label>
+<form action="<?php echo \Chibi\UrlHelper::route('user', 'settings', ['name' => $this->context->transport->user->name]) ?>" method="post" class="settings">
+	<div class="form-row safety">
+		<label>Safety:</label>
 		<div class="input-wrapper">
 			<?php foreach (PostSafety::getAll() as $safety): ?>
 				<?php if (PrivilegesHelper::confirm(Privilege::ListPosts, PostSafety::toString($safety))): ?>
@@ -22,8 +22,8 @@
 		</div>
 	</div>
 
-	<div class="endless-scrolling">
-		<label class="left" for="endless-scrolling">Endless scrolling:</label>
+	<div class="form-row endless-scrolling">
+		<label for="endless-scrolling">Endless scrolling:</label>
 		<div class="input-wrapper">
 			<label>
 				<?php
@@ -41,8 +41,8 @@
 		</div>
 	</div>
 
-	<div class="post-tag-titles">
-		<label class="left" for="post-tag-titles">Tags in thumbs:</label>
+	<div class="form-row post-tag-titles">
+		<label for="post-tag-titles">Tags in thumbs:</label>
 		<div class="input-wrapper">
 			<label>
 				<?php
@@ -60,8 +60,8 @@
 		</div>
 	</div>
 
-	<div class="hide-disliked-posts">
-		<label class="left" for="hide-disliked-posts">Hide down-voted:</label>
+	<div class="form-row hide-disliked-posts">
+		<label for="hide-disliked-posts">Hide down-voted:</label>
 		<div class="input-wrapper">
 			<label>
 				<?php
@@ -83,8 +83,8 @@
 
 	<?php $this->renderFile('message') ?>
 
-	<div>
-		<label class="left">&nbsp;</label>
+	<div class="form-row">
+		<label></label>
 		<button class="submit" type="submit">Update settings</button>
 	</div>
 </form>