templates: represent actual level in XP bar in user widget

This is much more useful in determining a user's activity than the
current level progression. Since the XP bar is the second most visible
item apart from the avatar, it's more relevant.

app/static/css/theme.css

@@ -105,5 +105,6 @@ footer {
     --background: #e0e0e0;
     --border: 1px solid #c0c0c0;
     --background-xp: #f85555;
+    --background-xp-100: #d03333;
     --border-xp: 1px solid #d03333;
 }

app/static/css/widgets.css

@@ -31,12 +31,19 @@
 	background: var(--background);
 	border: var(--border);
 }
+.profile-xp-100 {
+	background: var(--background-xp);
+	border: var(--border-xp);
+}
 .profile-xp div {
 	height: 10px;
 	background: var(--background-xp);
 	border: var(--border-xp);
 	margin: -1px;
 }
+.profile-xp-100 div {
+	background: var(--background-xp-100);
+}
 
 .profile.guest {
 	flex-direction: column;

app/templates/widgets/user.html

@@ -11,7 +11,11 @@
 			{% endif %}
 			<div class="profile-points">Niveau {{ user.level[0] }} <span>({{ user.xp }})</span></div>
 			<div class="profile-points-small">N{{ user.level[0] }} <span>({{ user.xp }})</span></div>
-			<div class="profile-xp"><div style='width: {{ user.level[1] }}%;'></div></div>
+			{% if user.level[0] <= 100 %}
+				<div class="profile-xp"><div style='width: {{ user.level[0] }}%;'></div></div>
+			{% else %}
+				<div class="profile-xp profile-xp-100"><div style='width: {{ user.level[0] - 100 }}%;'></div></div>
+			{% endif %}
 		</div>
 	</div>
 {% else %}