Improve alert box style

app/scss/components.scss

@@ -31,8 +31,8 @@ a:hover {
 	border-bottom: 1px solid #444;
 }
 
-.box > p, .box > table, .box > .buttonset, .box > form {
+.box .box-body {
-	margin: 1em;
+	padding: 1em;
 }
 
 // .box form {
@@ -139,7 +139,6 @@ select:not([multiple]) {
 .button:hover, .buttonset li a:hover, input[type=submit]:hover {
 	background: rgba(255,255,255,0.13);
 	border: 1px solid rgba(255,255,255,0.17);
-	border: 1px solid #555;
 	text-decoration: none;
 	color: #ddd;
 }
@@ -173,6 +172,45 @@ select:not([multiple]) {
 
 /* Alerts */
 
+.alert {
+	padding: 10px;
+	position: relative;
+}
+
+.alert .alert_right, .alert > form {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.alert .alert_right form {
+	height: 100%;
+}
+
+.alert form {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+
+.alert input {
+	margin: 0;
+	height: 100%;
+	background: 0;
+	border: 0;
+	border-left: 1px solid rgba(255,255,255,0.12);
+	border-radius: 0;
+}
+
+.alert input:hover {
+	border: 0;
+	border-left: 1px solid rgba(255,255,255,0.2);
+}
+
 #alerts {
 	list-style: none;
 	position: fixed;
@@ -258,6 +296,10 @@ table.fancyTable tfoot td {
 	font-size: 12px;
 }
 
+.t-mll tr td:not(:first-child) {
+	text-align: left;
+}
+
 .userlist li.NOT_JOINED {
 	color: #aaa;
 }

app/templates/admin/list.html

@@ -13,7 +13,7 @@
 	<div class="box box_grey">
 		<h2>Do action</h2>
 
-		<form method="post" action="">
+		<form method="post" action="" class="box-body">
 			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 			<select name="action">
 				<option value="importusers" selected>Create users from mod list</option>

app/templates/flask_user/login.html

@@ -10,7 +10,10 @@ Sign in
 		{% from "flask_user/_macros.html" import render_field, render_checkbox_field, render_submit_field %}
 		<h2>{%trans%}Sign in{%endtrans%}</h2>
 
-		<form action="" method="POST" class="form" role="form">
+		<form action="" method="POST" class="form" role="form" class="box-body">
+			<a href="{{ url_for('github_signin_page') }}">GitHub</a>
+
+
 			{{ form.hidden_tag() }}
 
 			{# Username or Email field #}
@@ -62,16 +65,17 @@ Sign in
 				{{ render_submit_field(form.submit, tabindex=180) }}
 			</form>
 
-			<a href="{{ url_for('github_signin_page') }}">GitHub</a>
 	</div>
 
 	<div class="right">
 		<aside class="box box_grey">
 			<h2>New here?</h2>
 
-			<p>Create an account using your forum account.</p>
+			<div class="box-body">
+				<p>Create an account using your forum account.</p>
 
-			<a href="{{ url_for('user_claim_page') }}" class="button">{%trans%}Claim your account{%endtrans%}</a>
+				<a href="{{ url_for('user_claim_page') }}" class="button">{%trans%}Claim your account{%endtrans%}</a>
+			</div>
 		</aside>
 	</div>
 </div>

app/templates/flask_user/public_base.html

@@ -3,8 +3,10 @@
 {% block container %}
 	<main>
 		<div class="box box_grey">
-			{% block content %}
+			<div class="box-body">
-			{% endblock %}
+				{% block content %}
+				{% endblock %}
+			</div>
 		</div>
 	</main>
 {% endblock %}

app/templates/packages/editrequest_view.html

@@ -28,30 +28,38 @@
 			This edit request was rejected.
 		</div>
 	{% elif package.checkPerm(current_user, "APPROVE_CHANGES") %}
-		<div class="box box_grey">
+		<div class="box box_grey alert">
-			<form method="post" action="{{ request.getApproveURL() }}">
+			Request can be merged.
-				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
-				<input type="submit" value="Approve and Apply" />
+			<div class="alert_right">
-			</form>
+				<form method="post" action="{{ request.getApproveURL() }}">
-			<form method="post" action="{{ request.getRejectURL() }}">
+					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+					<input type="submit" value="Approve and Apply" />
-				<input type="submit" value="Reject" />
+				</form>
-			</form>
+				<form method="post" action="{{ request.getRejectURL() }}">
+					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+					<input type="submit" value="Reject" />
+				</form>
+			</div>
 		</div>
 	{% endif %}
 
-	<table>
+	<table class="fancyTable t-mll">
-		<tr>
+		<thead>
-			<th>Property</th>
-			<th>Old</th>
-			<th>New</th>
-		</tr>
-
-		{% for change in request.changes %}
 			<tr>
-				<td>{{ change.key.value }}</td>
+				<th>Property</th>
-				<td>{{ change.oldValue }}</td>
+				<th>Old</th>
-				<td>{{ change.newValue }}</td>
+				<th>New</th>
 			</tr>
-		{% endfor %}
+		</thead>
+		<tbody>
+			{% for change in request.changes %}
+				<tr>
+					<td>{{ change.key.value }}</td>
+					<td>{{ change.oldValue }}</td>
+					<td>{{ change.newValue }}</td>
+				</tr>
+			{% endfor %}
+		</tbody>
+	</table>
 {% endblock %}